import React, { useCallback, useEffect, useRef } from "react";

// import Hello from "../../components/demo/Hello";

// import HelloHOC from "../../components/demo/HelloHOC";

function useDebounce(fn: Function, delay: number) {
  let timer = useRef<number>(0);
  return useCallback(
    function debounce(this: unknown, ...rest: any[]) {
      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        fn.call(this, ...rest);
      }, delay);
    },
    [fn, delay]
  );
}

function DisplayDemo() {
  let b = useDebounce(() => {
    console.log("debounce");
  }, 20);
  const t1 = setInterval(() => {
    b()
  }, 10);

  setTimeout(() => {
    clearInterval(t1);
  }, 2000);

  return (
    <>
      {/* <Hello name="TypeScript" /> */}
      {/* <HelloHOC name='loading' /> */}
    </>
  );
}

export default DisplayDemo;
